<template>
  <n-select
    v-model:value="selected_value"
    label-field="name"
    value-field="id"
    placeholder="选择集合"
    :options="options"
    clearable
    filterable
  />
  <n-popover overlap trigger="click">
    <template #trigger><n-button> 设置</n-button></template>
    <n-button size="small" @click="createBadge">创建</n-button>
    <n-button size="small" @click="tosyncRemote">同步</n-button>
  </n-popover>
  <collection-edit ref="collectionEdit" :id="-1" />
</template>

<script>
import { computed, ref } from "@vue/runtime-core";
import { useStore } from "vuex";
import { NPopover, NSelect } from "naive-ui";
import CollectionEdit from "@/views/edit/CollectionEditView";
export default {
  components: { NSelect, NPopover, CollectionEdit },

  setup() {
    const store = useStore();

    const collectionEdit = ref(null);
    let selected_value = ref(null);
    let options = computed(() => store.state.collection.list);

    /**
     * 打开创建标签
     */

    const createBadge = () => {
      collectionEdit.value.showModal = true;
    };

    /**
     * 请求远程同步标签
     */

    const tosyncRemote = () => {
      store.dispatch("getCollections", {
        success() {
          console.log("同步成功");
        },
        error() {
          // message.error(`获取标签失败 {code:${error.response.status}}`);
        },
      });
    };

    return {
      selected_value,
      options,
      createBadge,
      tosyncRemote,
      collectionEdit,
      getSelect: () => {
        return selected_value.value;
      },
      setSelect: (collection) => {
        if (collection) selected_value.value = collection.id;
      },
    };
  },
};
</script>

<style scoped>
</style>